<template>
    <view>
        <view class="margin-base bg-white radius-2xl padding-base">
            <view @click="handleSetHeadImg()" class="flex align-center justify-between padding-tb-xl border-b-grey">
                <view>头像</view>
                <image v-if="memberStore.userInfo.headimgurl" class="size-img-sm" :src="memberStore.userInfo.headimgurl" mode="scaleToFill" />
                <image v-else class="size-img-sm" src="@/static/avatar.png" mode="scaleToFill" />
            </view>

            <view @click="editName" class="flex align-center justify-between padding-tb-xl border-b-grey">
                <view>昵称</view>
                <view class="flex align-center">
                    <view>{{ memberStore.userInfo.truename ? memberStore.userInfo.truename : "微信用户" }}</view>
                    <view class="cuIcon-right text-lg margin-left-base"></view>
                </view>
            </view>

            <view @click="goPage('/pages/user/setmobile')" class="flex align-center justify-between padding-tb-xl border-b-grey">
                <view>手机号</view>
                <view class="flex align-center">
                    <view>{{ memberStore.userInfo.mobile ? memberStore.userInfo.mobile : "未绑定手机号" }}</view>
                    <view class="cuIcon-right text-lg margin-left-base"></view>
                </view>
            </view>
        </view>

        <view
            @click="goPage('/pages/user/setpsd?type=login')"
            class="margin-base bg-white radius-2xl padding-lr-base padding-tb-xl flex align-center justify-between"
        >
            <view>登陆密码</view>
            <view class="cuIcon-right text-lg margin-left-base"></view>
        </view>
        <view
            @click="goPage('/pages/user/setpsd?type=pay')"
            class="margin-base bg-white radius-2xl padding-lr-base padding-tb-xl flex align-center justify-between"
        >
            <view>支付密码</view>
            <view class="cuIcon-right text-lg margin-left-base"></view>
        </view>
        <view class="margin-lr-base" style="margin-top: 80rpx">
            <button class="login-btn round bg-main" @click="exit">
                <text class="text-lg">退出登陆</text>
            </button>
        </view>
        <popup ref="popupRef" title="修改昵称" height="45vh">
            <template v-slot:content>
                <view>
                    <acountInput v-model="turename" title="昵称" placeholder="请输入昵称" />
                    <button @click="submit(true)" class="text-lg round bg-main margin-top-2xl">提交</button>
                </view>
            </template>
        </popup>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useModal, useTask } from "@/utils/message";
import { upload } from "@/api/common";
import { useMemberStore } from "@/store/module/member";
import { goPage } from "@/utils";
import popup from "@/components/common/popup-bottom.vue";
import acountInput from "@/components/input/acount-input.vue";

const memberStore = useMemberStore();
const popupRef = ref<{ open: () => void }>();
const turename = ref<string>("");

const exit = async () => {
    await useModal("温馨提示", "确定退出登陆吗？", "确认", "取消");
    memberStore.clearUserInfo();
};

const handleSetHeadImg = () => {
    uni.chooseImage({
        count: 1,
        success: async (res: UniApp.ChooseImageSuccessCallbackResult) => {
            const img: any = res.tempFilePaths[0];
            const data = await upload({ filePath: img });
            memberStore.userInfo.headimgurl = data;
            submit();
        },
        fail: (error: any) => {
            console.log(error);
        }
    });
};

const submit = (editName?: boolean) => {
    if (editName) {
        if (!turename.value) {
            useTask("请输入昵称");
            return;
        }
        if (turename.value == memberStore.userInfo.truename) {
            useTask("昵称未修改");
            return;
        }
    }
    memberStore.editUserInfo({
        userid: memberStore.userInfo.userid,
        headimgurl: memberStore.userInfo.headimgurl,
        truename: turename.value
    });
};

const editName = () => {
    turename.value = memberStore.userInfo.truename || "";
    popupRef.value?.open();
};
</script>

<style lang="scss" scoped></style>
